<template>
	<view>
		<head-bar-view title="巡查列表" title-color="#fff" is-white-back="true" />
		<view class="header">
			<text>巡检任务共
				<text style="color: rgb(63, 119, 244);margin: 0 4rpx;">{{info.total}}</text>
				项，待巡检
				<text style="color: rgb(63, 119, 244);margin: 0 4rpx;">{{info.need}}</text>
				项</text>
		</view>
		<view class="xuncha-list">
			<view v-for="(item,index) in list" :key="index" class="item" @click="start(item)">
				<view class="top">
					<view class="title">
						<view class="num">
							{{index+1}}
						</view>
						<view class="name">
							<view class="">
								任务名称：
							</view>
							<view class="">
								{{item.name}}
							</view>
						</view>
					</view>
					<view class="type">
						{{item.type == 1 ? '日常巡查' : '综合巡查'}}
					</view>
				</view>
				<view class="content">
					<view class="row">
						<view class="label">
							任务开始时间：
						</view>
						<view class="value">
							{{formatTimestamps(item.start)}}
						</view>
					</view>
					<view class="row">
						<view class="label">
							任务结束时间：
						</view>
						<view class="value">
							{{formatTimestamps(item.end)}}
						</view>
					</view>
					<view class="row">
						<view class="label">
							巡查系统：
						</view>
						<view class="value">
							{{item.checkOptions.map(item=>item.name).join(',')}}
						</view>
					</view>
					<view class="row">
						<view class="label">
							任务状态：
						</view>
						<view class="value">
							{{formattedData(item.taskStatus)}}
						</view>
					</view>
					<view class="bottom-row">
						<view class="row">
							<view class="label">
								巡查状态：
							</view>
							<view class="value">
								{{getStatus(item.checkStatus)}}
							</view>
						</view>
						<view class="btn">
							{{item.checkStatus==2?'查看结果':'开始巡查'}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<no-data-view :list="list" :load-state="loadState" />
		<uni-load-more :status="loadState">
		</uni-load-more>
	</view>
</template>

<script lang="ts">
	import { Vue, Component } from "vue-property-decorator";
	import HeadSearchView from "@/pages/components/head_search_view.vue";
	import HeadBarView from "@/pages/components/head_bar_view.vue";
	import ItemUnitView from "@/pages/unit/components/item_unit_view.vue";
	import XRouterConfig from "@/api/XRouterConfig";
	import BaseApi from "@/api/BaseApi";
	import ApiDefine from "@/api/ApiDefine";
	import { mixins } from "vue-class-component";
	import EventConfig from "@/mixins/EventConfig";
	import StateConfig from "@/mixins/StateConfig";
	import NoDataView from "@/pages/components/no_data_view.vue";

	@Component({
		components: {
			HeadSearchView,
			HeadBarView,
			ItemUnitView,
			NoDataView,
		}
	})
	export default class UnitView extends mixins(Vue, EventConfig, StateConfig) {
		created() {

			//   this.toEvent('onReachBottom', () => {
			// console.log('bottom')
			//     this.page++;
			//     this.initData();
			//   })
		}
		onShow() {
			console.log('onShow')
			this.page = 1;
			this.list = []
			this.initData();
		}
		search(value : any) {
			this.page = 1;
			this.unitname = value;
			this.initData();
		}

		page = 1;
		pageRow = 10;
		unitname = ''
		info = {}
		list : any = [];
		loadState = 'more';

		async initData() {
			this.loadState = 'loading'
			let res = await BaseApi.instance().fetch(ApiDefine.unitSum, {
				regionId: uni.getStorageSync('regionId')
			}, "GET", { "Token": uni.getStorageSync('x-token') })
			this.info = res.result
			let value = await BaseApi.instance().fetch(ApiDefine.PATROL_TASK, {
				pageNumber: this.page,
				pageSize: this.pageRow,
				regionId: uni.getStorageSync('regionId')
			}, "GET", { "Token": uni.getStorageSync('x-token') })
			console.log(value, 'crjvalue')
			if (value == null) {
				// this.setDataState(this.list)
				return;
			}
			if (value.result.data ?? [].length == 0) {
				this.loadState = 'no-more'
			}
			if (this.page == 1) {
				this.list = value.result.data ?? []
				// this.setDataState(this.list)
				return;
			}
			this.list = this.list.concat(value.result.data ?? []);
			// this.setDataState(this.list)
		}
		onReachBottom() {
			this.page++;
			this.initData();
		}
		start(item : any) {
			if (item.checkStatus == 0) {
				BaseApi.instance().fetch(ApiDefine.unitStart, {id:item.id}, "POST", {
					"Token": uni.getStorageSync('x-token'),
					"content-type": "application/json"
				}).then(res=>{
					
				})
				XRouterConfig.goTo('xuncha_submit', { item: JSON.stringify(item) })
			} else if(item.checkStatus == 1){
				XRouterConfig.goTo('xuncha_submit', { item: JSON.stringify(item) })
			}else{
				XRouterConfig.goTo('xuncha_detail', { item: JSON.stringify(item) })
			}
		}
		formatTimestamps(timestamp : any) {
			if (!timestamp) {
				return ''
			}
			timestamp *= 1000
			// 创建一个新的Date对象
			const date = new Date(timestamp);
			// 获取年、月、日、小时、分钟、秒
			const year = date.getFullYear();
			const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份是从0开始的，所以需要+1，并确保是两位数
			const day = String(date.getDate()).padStart(2, '0');
			// 格式化日期时间字符串
			return `${year}-${month}-${day}`;
		}
		formattedData(status : any) {
			let arr = ['未开始', '进行中', '已结束']
			return arr[status]
		}
		getStatus(val : any) {
			let arr = ['待巡查', '巡查中', '已巡查']
			return arr[val]
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		font-size: 28rpx;
		height: 54rpx;
		line-height: 54rpx;
		background: #F2F9FF;
		padding-left: 16rpx;
		font-weight: bold;
	}

	.xuncha-list {
		font-size: 26rpx;
		padding: 20rpx;

		.item {
			margin-bottom: 16rpx;
			box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.05);
			border-radius: 20rpx;

			.top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #E6E6E6;
				padding: 20rpx;

				.title {
					display: flex;
					align-items: center;

					.num {
						padding: 8rpx;
						min-width: 28rpx;
						height: 28rpx;
						line-height: 28rpx;
						border-radius: 28rpx;
						color: #fff;
						text-align: center;
						background: linear-gradient(90deg, #64ACF6 0%, #3F77F4 100%);
						margin-right: 4rpx;
					}

					.name {
						display: flex;
					}
				}
			}

			.content {
				padding: 20rpx;

				.row {
					display: flex;
					margin-bottom: 8rpx;
					color: rgb(102, 102, 102);

					.label {
						min-width: 200rpx;
						text-align: right;
					}

					.value {
						flex: 1;
					}
				}

				.bottom-row {
					display: flex;
					justify-content: space-between;

					.btn {
						width: 130rpx;
						height: 44rpx;
						color: #fff;
						display: flex;
						justify-content: center;
						align-items: center;
						border-radius: 8rpx;
						background: linear-gradient(90deg, #64ACF6 0%, #3F77F4 100%);
					}
				}
			}
		}
	}
</style>